<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layout/mobileLayout.xhtml">
	<ui:define name="contentPart">
		<h:form id="formId" style="font-size:40px; #{shoppingListsAction.formVisible ? 'display:block' : 'display:none'}">
		
			<h:outputText value="Shopping list:" />
			<p:dataTable value="#{shoppingListsAction.allLists}" var="db"
				paginator="true" rows="20" paginatorPosition="bottom">
				<p:column headerText="Date" style="text-align:center;">
					#{db.list.creationDate}
				</p:column>

				<p:column headerText="Items" style="text-align:center;">
					#{fn:length(db.list.items)}
				</p:column>

				<p:column style="text-align:center;">
					<p:commandButton title="Details"
						icon="buttonDetails32" styleClass="buttonTable32"
						action="#{shoppingListsAction.showListDetails}"
						update=":formId :growl">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
					<p:commandButton title="Edit"
						icon="buttonEdit32" styleClass="buttonTable32"
						action="#{shoppingListsAction.showEditionDialog}"
						update=":formId :growl :editionForm">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
					<p:commandButton title="Copy" 
						icon="buttonCopy32" styleClass="buttonTable32"
						action="#{shoppingListsAction.copySelectedList}"
						update=":formId :growl">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
					<p:commandButton
						styleClass="buttonTable32" icon="buttonDelete32"
						action="#{shoppingListsAction.deleteSelectedList}"
						update=":formId :growl">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>

			<p:commandButton value="New"
				action="#{shoppingListsAction.showListCreationDialog}"
				update=":creationForm :formId">
				<f:setPropertyActionListener value="#{db}"
					target="#{shoppingListsAction.selectedShoppingList}" />
			</p:commandButton>
		</h:form>

		<h:form id="creationForm" style="font-size:40px; max-width:800px; #{shoppingListsAction.creationDialogVisible? 'display:block' : 'display:none'}">
			<p:commandButton value="Add item"
				action="#{shoppingListsAction.addItemInNewList}"
				update=":creationForm" />

			<p:dataTable value="#{shoppingListsAction.newList.items}" var="item"
				paginator="true" rows="20" paginatorPosition="bottom" style="width:100%"> 
				
				<p:column headerText="Name" width="600">
					<p:inputText value="#{item.name}" style="width: 98%"/>
				</p:column>

				<p:column headerText="Quantity" width="200">
					<p:inputText value="#{item.quantity}" style="width: 98%"/>
				</p:column>
				
				<p:column>
					<p:commandButton
						styleClass="buttonTable32" icon="buttonDelete32"
						action="#{shoppingListsAction.removeItemInNewList}"
						update=":creationForm">
						<f:setPropertyActionListener value="#{item}"
							target="#{shoppingListsAction.selectedItem}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>

			<h:panelGrid columns="2">
				<p:commandButton value="Create"
					action="#{shoppingListsAction.createNewList}"
					update=":creationForm :growl :formId" />
				<p:commandButton value="Cancel"
					action="#{shoppingListsAction.cancelNewListCreation}"
					update=":creationForm :formId" />
					
				
			</h:panelGrid>
		</h:form>

		<h:form id="editionForm" style="font-size:40px; max-width:800px; #{shoppingListsAction.editionDialogVisible? 'display:block' : 'display:none'}">
				<p:commandButton value="Add item"
					action="#{shoppingListsAction.addItemInEditedList}"
					update=":editionForm" />

				<p:dataTable style="width:100%"
					value="#{shoppingListsAction.selectedShoppingList.list.items}"
					var="item" paginator="true" rows="20" paginatorPosition="bottom">
					
					<p:column headerText="Name" width="600">
						<p:inputText value="#{item.name}" style="width: 98%"/>
					</p:column>

					<p:column headerText="Quantity" width="200">
						<p:inputText value="#{item.quantity}" style="width: 98%" />
					</p:column>

					<p:column>
						<p:commandButton
							styleClass="buttonTable32" icon="buttonDelete32"
							action="#{shoppingListsAction.removeItemInEditedList}"
							update=":editionForm">
							<f:setPropertyActionListener value="#{item}"
								target="#{shoppingListsAction.selectedItem}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>

				<h:panelGrid columns="2">
					<p:commandButton value="Update"
						action="#{shoppingListsAction.updateSelectedList}"
						update=":editionForm :growl :formId" />
					<p:commandButton value="Cancel"
						action="#{shoppingListsAction.hideEditionDialog}"
						update=":editionForm :formId" />
				</h:panelGrid>
		</h:form>
	</ui:define>
</ui:composition>
</html>
